<script setup>
import { GetBookListAPI } from '@/apis/book'
import router from '@/router'
import { usePayStore } from '@/stores'
import { ref, onMounted } from 'vue'
const count = ref(12)
let viewHeight = 400
const handleScroll = ({scrollTop}) => {  
  // if(scrollTop === viewHeight) {
  //   console.log("-----------------");
  if(scrollTop === viewHeight){
    viewHeight += 28
  }
}

const bookList = ref()
const getData = async () => {
  const result = await GetBookListAPI()
  bookList.value = result
}
const payBook = async (item) => {
  console.log(item);
  
  await usePayStore().setOrderDetail(item)
  router.push('/createOrder')
}


const loading = ref(true)
onMounted(async() => {
  await getData()
  loading.value = false
})
</script>

<template>
  <div class="book">
    <el-scrollbar height="500px" @scroll="handleScroll" v-loading="loading" element-loading-text="加载中...">
      <ul class="bookList">
        <li class="item" v-for="item in bookList" :key="item.id">
          <div class="box">
            <div class="img">
              <img :src="item.avatar" alt="">
            </div>
            <div class="text">
                <el-icon :size="20" color="skyblue">
                  <Notebook />
                </el-icon> {{item.bookName}}
                <p>作者：{{ item.author }}</p>
                <p class="price">价格：<i>￥</i><span>{{ item.bookMoney }}</span></p>
                <div class="pay">
                  <span @click="payBook(item)">立即购买</span>
                </div>
            </div>
          </div>
        </li>
      </ul>
  </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.bookList {
  display: flex;
  flex-wrap: wrap;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
  height: 300px;
  
  margin-left: 10px;
  margin-bottom: 20px;
  padding-top: 5px;
  border: 1px solid #fff;
  

}
.item:hover {
  border: 1px solid #e3e4e5;
}

.img {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
}
.img img {
  width: 100%;
  height: 100%;
}

.text {
  align-content: center;
}
.text p {
  padding: 5px;
}
.pay {
  width: 100%;
  padding: 5px;
  // background-color: pink;
  
  text-align: center;
}
.pay span{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #c3c4c5;
  cursor: pointer;
  color: red;
}
.pay span:hover {
  border: 1px solid red;
}

.price i{
  font-size: 14px;
  color: red;
}
.price span {
  color: red;
  font-size: 20px;
}
</style>